<template>
  <div>
    <transition name="imageryBounce">
      <v-touch v-if="clueImageryShow" class="imagery" @tap="imageryTouch($event)" :style="imageryStyle"></v-touch>
    </transition>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex"
import { mixins } from "@/common/mixins/imageryMixins.js"
export default {
  mixins: [mixins],
  data() {
    return {
      clueImageryShow: false
    }
  },
  computed: {
    ...mapGetters("blueFoxStatus", {
      clueImageryIndex: "getClueImageryIndex"
    })
  },
  methods: {
    ...mapActions("blueFoxStatus", ["setClueImageryIndex"])
  },
  watch: {
    clueImageryIndex: function (num) {
      if (this.imageryIndex.eryId === num) {
        this.clueImageryShow = true
        this.setClueImageryIndex(0)
      }
    }
  }
};
</script>
    
<style scoped lang='stylus'></style>